<template>
  <main>
    <div class="fs12">111</div>
    <div class="fs14">222</div>
    <div class="fs16">333</div>
    <div class="fs18 bold">444</div>
    <a-button type="primary" class="mr20" @click="handleBtn('message')">测试message</a-button>
    <a-button type="primary" class="mr20" @click="handleBtn('notification')"
      >测试notification</a-button
    >
    <a-button type="primary" class="mr20" @click="handleBtn('modal')">测试Modal</a-button>
  </main>
</template>

<script setup lang="ts">
import { Modal, message, notification } from 'ant-design-vue'

function handleBtn(type: string) {
  if (type === 'message') {
    message.info('This is a normal message')
  } else if (type === 'notification') {
    notification.open({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      style: {
        width: '600px',
        marginLeft: `${335 - 600}px`,
      },
      class: 'notification-custom-class',
    })
  } else if (type === 'modal') {
    Modal.error({
      title: 'This is an error message',
      content: 'some messages...some messages...',
    })
  }
}
</script>
